<template>
    <view class="pub_page pub_page_bg pub_crystal_detail pub_header_padding">
        <pub-head headerName="crystal_detail" :headerConfig="headerConfig"></pub-head>
        <pub-dialog v-show="dialogShow" dialogName="crystal_detail" :dialogConfig="dialogConfig"
            @dialogBack="dialogBack"></pub-dialog>
        <div class="pub_page_scroll page_box" v-if="goodsInfo.info">
            <!-- <div v-html="goodsInfo.info.description || ''"></div> -->
            <rich-text class="detail_box" :nodes="goodsInfo.info.description"></rich-text>
            <div class="foot_btn pub_btn" @click="goodsInfoDeal('open')">立即购买</div>
        </div>

        <div class="alert_div_shadow" v-if="goodsInfo.show">
            <div class="alert_div">
                <div class="cha" @click="goodsInfo.show = false"></div>
                <div class="info">
                    <pub-image class="img" :src="goodsInfo.info.cover || goodsInfo.info.goodsCover"></pub-image>
                    <div class="text">
                        <div class="p_1">{{ goodsInfo.info.goodsName }}</div>
                        <div class="p_2"><span class="span_1">{{ goodsInfo.info.salePrice }}</span> 金币<span
                                class="span_2">库存：{{ goodsInfo.info.stock }}</span></div>
                    </div>
                </div>
                <div class="alert_box">
                    <div class="sku_lists">
                        <div class="sku_li" :class="li.skuId == goodsInfo.skuId ? 'sku_li_active' : ''"
                            v-for="(li, key) in goodsInfo.skuInfoList" :key="key"
                            @click="goodsInfoDeal('sku_click', li)">{{
                            li.goodsName }}
                        </div>
                    </div>
                    <div class="info_nums">
                        <div class="p">购买数量</div>
                        <div class="nums">
                            <div class="sub" @click="goodsInfoDeal('num_click', 'sub')"></div>
                            <div class="num">{{ goodsInfo.num }}</div>
                            <div class="add" @click="goodsInfoDeal('num_click', 'add')"></div>
                        </div>
                    </div>
                    <div class="pub_inputs">
                        <div class="abox" @click="$comFun.openWin('/pages/other/address', { openType: 2 })">
                            <div class="ali">
                                <div class="atitle">选择地址</div>
                                <div class="atext ainput_right_icon" v-if="goodsInfo.addressInfo == ''">请选择收货地址</div>
                                <div class="atext ainput_right_icon" v-else>
                                    {{ goodsInfo.addressInfo.receiver }} {{ goodsInfo.addressInfo.phone }} <br>
                                    {{ goodsInfo.addressInfo.area }}{{ goodsInfo.addressInfo.address }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="pub_btn" @click="goodsInfoDeal('to_buy')">确认购买</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '商品详情',//标题栏内容
                left_type: 3,
                title_color: '#fff',
                left_content: 'white',
            },

            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                // title: 'demo',//标题栏内容
                content: '',
            },

            goodsInfo: {
                show: false,
                info: '',
                skuInfoList: [],

                num: 1,
                spuId: '',
                skuId: '',
                addressInfo: ''
            },
        };
    },
    onLoad(option) {
        if (option.spuId) {
            this.goodsInfoDeal('init', option);
        }
        const that = this;
        uni.$on('chooseAddressBack', function (data) {
            // console.log(data);
            that.goodsInfo.addressInfo = data;
        })
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {

        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.name == 'crystal_detail' && data.key == 1) {
                if (this.dialogType == 'goodsBuy') {
                    this.goodsInfoDeal('sure_buy');
                }
            }
        },
        async goodsInfoDeal(type, data_1, data_2) {
            switch (type) {
                case 'init':
                    this.$comFun.openLoading();
                    const res_open = await this.$request.get('goods/getCrystalGoodsInfo', {
                        spuId: data_1.spuId
                    });
                    this.$comFun.closeLoading();
                    // console.log(res_open);
                    if (res_open.code == 200 && res_open.result.skuInfoList.length > 0) {
                        let richText = '';
                        if (res_open.result.description.slice(0, 1) == '<') {
                            richText = res_open.result.description;
                        } else {
                            try {
                                richText = JSON.parse(res_open.result.description);
                                let arr = richText.map(li => {
                                    return `<img src='${li}'  width='100%' />`
                                })
                                richText = arr.join(" ");
                            } catch (error) {
                                richText = `<img src='${data_1.cover}'  width='100%' />`;
                            }
                        }
                        // console.log(111, richText);

                        this.goodsInfo = {
                            show: false,
                            info: {
                                goodsCover: data_1.cover,
                                goodsName: data_1.goodsName,
                                description: richText,
                                cover: res_open.result.skuInfoList[0].cover,
                                stock: res_open.result.skuInfoList[0].stock,
                                salePrice: res_open.result.skuInfoList[0].salePrice,
                            },
                            skuInfoList: res_open.result.skuInfoList,

                            num: 1,
                            spuId: res_open.result.spuId,
                            skuId: res_open.result.skuInfoList[0].skuId,
                            addressInfo: ''
                        }
                        // console.log(this.goodsInfo);
                    } else {
                        this.$comFun.toast('暂无可购买的规格');
                    }
                    break;
                case 'open':
                    this.goodsInfo.show = true
                    break;
                case 'close':
                    this.goodsInfo.show = false;
                    break;
                case 'num_click':
                    if (data_1 == 'sub') {
                        if (this.goodsInfo.num > 1) {
                            this.goodsInfo.num--;
                        }
                    }
                    if (data_1 == 'add') {
                        if (this.goodsInfo.num < Number(this.goodsInfo.info.stock)) {
                            this.goodsInfo.num++;
                        }
                    }
                    break;
                case 'sku_click':
                    this.goodsInfo.info.cover = data_1.cover;
                    this.goodsInfo.info.salePrice = data_1.salePrice;
                    this.goodsInfo.info.stock = data_1.stock;
                    this.goodsInfo.skuId = data_1.skuId;
                    this.goodsInfo.num = 1;
                    break;
                case 'to_buy':
                    if (this.goodsInfo.addressInfo == '') {
                        this.$comFun.toast('请选择收货地址');
                        return;
                    }
                    if (this.goodsInfo.num > this.goodsInfo.info.stock) {
                        this.$comFun.toast('库存不足，无法购买');
                        return;
                    }
                    this.dialogType = 'goodsBuy';
                    this.dialogShow = true;
                    this.dialogConfig = {
                        content: '是否确认购买？',
                    };
                    break;
                case 'sure_buy':
                    this.$comFun.openLoading();
                    const res = await this.$request.post('payments/createOrder', {
                        addressId: this.goodsInfo.addressInfo.id,
                        items: [{
                            buyNum: this.goodsInfo.num,
                            skuId: this.goodsInfo.skuId,
                            spuId: this.goodsInfo.spuId,
                            sellPrice: this.goodsInfo.info.salePrice,
                            totalSellPrice: Math.round(this.goodsInfo.info.salePrice * this.goodsInfo.num * 100) / 100
                        }],
                        payWay: 7,
                        orderType: 3
                    });
                    this.$comFun.closeLoading();
                    if (res.code == 200) {
                        this.goodsInfo.show = false;
                        this.$comFun.toast('支付成功');
                    } else {
                        this.$comFun.toast(res.message);
                    }
                    break;
                default:
                    break;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/crystal.scss";
</style>
